<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>导航</title>

	<!-- <style type="text/css">
		* {
			margin: 0;
			padding: 0;
			list-style: none;
			font-size: 14px
		}

		#container {
			width: 300px;
			height: auto;
			border: 1px solid #e4e4e4;
			margin-right: auto;
			margin-left: auto;
			margin-top: 50px;
			padding: 10px;
		}

		.second-wrapper {
			margin: 10px 0 10px 20px;
			display: none;
		}

		.three-wrapper {
			margin: 10px 0 10px 20px;
			display: none;
		}

		.active {
			background-color: orange;
		}
	</style> -->


	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
		integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


	<style>
		ul {
			padding-left: 20px;
			list-style: none;
		}

		a {
			color: #000;
		}

		a:link,
		a:visited,
		a:hover,
		a:active {
			text-decoration: none;
		}

		.organization-tree-wrap {
			width: 200px;
			overflow: auto;
			margin: 100px;
		}

		#organization-tree {
			padding: 0;
		}

		#organization-tree .tree-icon {
			cursor: pointer;
		}

		#organization-tree li {
			width: 100px;
			line-height: 30px;
		}

		#organization-tree li ul {
			display: none;
		}
	</style>

</head>

<body>

	<div class="organization-tree-wrap">
		<ul id="organization-tree"></ul>
	</div>

	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="http://mockjs.com/dist/mock.js"></script>
	<script src="./mockdata.js"></script>
	<script src="./index.js"></script>
</body>

</html>